import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Keyboard } from "swiper/modules";
import { FileModel } from "../common/model";
import "swiper/less";
import "swiper/less/navigation";
import "swiper/less/pagination";
import { useState } from "react";
import { PreviewImage } from "./PreviewImage";
import styles from "./index.module.less";
import { clsx } from "../common/utils";

export const PreviewCard: React.FC<{ images: FileModel[] }> = ({ images }) => {
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewIndex, setPreviewIndex] = useState(0);
  return (
    <>
      <Swiper
        className={clsx(
          styles.PreviewCard,
          "select-none rounded-xl aspect-video"
        )}
        onClick={(swiper) => {
          setPreviewOpen(true);
          setPreviewIndex(swiper.realIndex);
        }}
        modules={[Navigation, Pagination, Keyboard]}
        keyboard
        pagination={{
          clickable: true,
          bulletActiveClass: "!bg-white !opacity-90",
        }}
        navigation
        loop
      >
        {images.map((f, index) => (
          <SwiperSlide key={index} className="bg-black">
            <img
              alt=""
              src={f.url}
              loading="lazy"
              decoding="async"
              className="object-cover w-full h-full"
            />
            <div className="swiper-lazy-preloader swiper-lazy-preloader-white" />
          </SwiperSlide>
        ))}
      </Swiper>
      <PreviewImage
        open={previewOpen}
        images={images}
        initIndex={previewIndex}
        onClose={() => setPreviewOpen(false)}
      />
    </>
  );
};
